<template>
	<view>
		<ttBar leftIcon="icon-back" :title="memberInfo.id?'修改学员':'添加学员'">
			<!-- <template v-slot:rightCnt >
				<view class="rgt" @tap="remove" v-if="memberInfo.id">
					<text class="rt">删除</text>
				</view>
			</template> -->
		</ttBar>
		<view class="infoBox">
			<view class="row">
				<text class="label">学员姓名</text>
				<input type="text" placeholder="请输入学员姓名" v-model="memberInfo.name" />
			</view>
			<view class="row">
				<text class="label">生日</text>
				<input type="text" placeholder="请输入学员昵称" v-model="memberInfo.birthday" @tap="showDate" disabled="disabled" />
			</view>
			<view class="row">
				<text class="label">性别</text>
				<view class="valueBox">
					<view class="item" @tap="changeSex(1)">
						<text class="iconfont" :class="[memberInfo.sex==1?'icon-danxuanfill':'icon-yuanxingweixuanzhong']"></text>
						<text>男</text>
					</view>
					<view class="item" @tap="changeSex(2)">
						<text class="iconfont " :class="[memberInfo.sex==2?'icon-danxuanfill':'icon-yuanxingweixuanzhong']"></text>
						<text>女</text>
					</view>
				</view>
			</view>
			<view class="row">
				<text class="label">手机号</text>
				<input type="number" placeholder="请输入手机号" v-model="memberInfo.phone" />
			</view>
			<view class="row row2">
				<text class="label">与您关系</text>
				<view class="valueBox">
					<view class="item" @tap="changeType(1)">
						<text class="iconfont" :class="[memberInfo.type==1?'icon-danxuanfill':'icon-yuanxingweixuanzhong']"></text>
						<text>子女</text>
					</view>
					<view class="item" @tap="changeType(2)">
						<text class="iconfont" :class="[memberInfo.type==2?'icon-danxuanfill':'icon-yuanxingweixuanzhong']"></text>
						<text>父母</text>
					</view>
					<view class="item" @tap="changeType(3)">
						<text class="iconfont" :class="[memberInfo.type==3?'icon-danxuanfill':'icon-yuanxingweixuanzhong']"></text>
						<text>配偶</text>
					</view>
					<view class="item" @tap="changeType(4)">
						<text class="iconfont" :class="[memberInfo.type==4?'icon-danxuanfill':'icon-yuanxingweixuanzhong']"></text>
						<text>其他</text>
					</view>
				</view>
			</view>
			<view class="row " @tap="changeDefault">
				<text class="label label2">设为默认学员</text>
				<!-- icon-yuanxingweixuanzhong -->
				<text class="iconfont" :class="[memberInfo.used==1?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong']"></text>
			</view>
		</view>
		<view class="btnOp">
			<button @tap="save" :disabled="isDis">保存</button>
		</view>
		<w-picker
		    mode="date" 
		    startYear="1990" 
		    :endYear="yearNow"
		    :defaultVal="nyr"
		    :current="false" 
		    @confirm="selectNYR"
		    :disabledAfter="false"
		    ref="date" 
		    themeColor="#f00"
		></w-picker>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	import wPicker from "@/pagesA/components/w-picker/w-picker.vue";
	export default {
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo,
				isLogin:state=>state.user.isLogin,
			})
		},
		components:{
			wPicker
		},
		data() {
			return {
				memberInfo: {
					userId:0,
					id:0,
					name:'',
					sex:1,
					type:1,
					phone:'',
					used:0,
					birthday:''
					
				},
				isEdit:false,
				nyr:[],
				yearNow:'',
				isDis:false
			};
		},
		methods: {
			changeSex(e){
				e=parseInt(e)
				this.memberInfo.sex=e;
			},
			changeType(e){
				e=parseInt(e)
				this.memberInfo.type=e;
			},
			changeDefault(){
				if(this.memberInfo.used==1){
					this.memberInfo.used=0;
				}else{
					this.memberInfo.used=1;
				}
			},
			save(){
				let rgx = /^1[3456789]\d{9}$/;
				if(!this.memberInfo.name){
					uni.showToast({
						title: '学员昵称不能为空',
						icon: 'none'
					});
				}else if(!this.memberInfo.phone){
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none'
					});
				}else if(!rgx.test(this.memberInfo.phone)){
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
				}else{
					this.isDis=true
					if(this.isEdit){	//修改
						let _data=this.memberInfo
						this.$store.dispatch("apiEditMember",_data).then(res=>{
							uni.showToast({
								title: '修改学员成功',
								icon: 'none'
							});
							uni.$emit("shuaxin")
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},1000)
							
						})
					
					}else{		//新增
						let _data=this.memberInfo
						delete _data.id
						this.$store.dispatch("apiAddMember",_data).then(res=>{
							uni.showToast({
								title: '添加学员成功',
								icon: 'none'
							});
							uni.$emit("shuaxin")
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},1000)
							
						})
					}
				}
				
			},
			remove(){
				
			},
			showDate(){
				this.$refs.date.show()
			},
			selectNYR(e){
		
				this.nyr=e.checkArr
				this.memberInfo.birthday=e.result
			},
		},
		onLoad(cfm) {
			if(cfm.id){		//修改
				this.isEdit=true
				this.memberInfo =cfm
				delete this.memberInfo.url
				this.memberInfo.id =parseInt(cfm.id)
				this.memberInfo.age =parseInt(cfm.age)
				this.memberInfo.sex =parseInt(cfm.sex)
				this.memberInfo.type =parseInt(cfm.type)
				this.memberInfo.userId =this.userInfo.userId
				this.nyr=this.memberInfo.birthday.split('-')
				this.yearNow=new Date().pattern("yyyy-MM-dd").split('-')[0];
			}else{		//新增
				this.memberInfo.userId=this.userInfo.userId
				this.memberInfo.birthday=new Date().pattern("yyyy-MM-dd");
				this.nyr=this.memberInfo.birthday.split('-')
				this.yearNow=this.nyr[0];
				delete this.memberInfo.url;
			}
			
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}

	.rgt {
		display: flex;
		align-items: center;
		margin-right: -10upx;
	}

	.rt {
		font-size: 28upx;
		color: #ffbf13;
	}

	.icon-add {
		font-size: 36upx;
		color: #ffbf13;
	}

	.infoBox {
		display: flex;
		flex-direction: column;
		padding-top: 18upx;
		.row2{
			border-top:5px solid #f6f6f6;
		}
		.row {
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			padding: 50upx 30upx;
			border-bottom: 1px solid #e7e7e7;
			.iconfont{
				font-size: 40upx;
			}
			.label {
				font-size: 32rpx;
				color: #202932;
				display: block;
				width: 160upx;
				flex-shrink: 0;
			}
			.label2{
				flex: 1;
			}
			.valueBox{
				display: flex;
				align-items: center;
				flex: 1;
			}
			input{
				font-size: 32upx;
			}
			.item{
				width: 25%;
				display: flex;
				align-items: center;
				.iconfont{
					font-size: 36upx;
					margin-right: 10upx;
				}
				text{
					font-size: 32upx;
				}
			}
		}
	}
	.icon-danxuanfill,.icon-yuanxingxuanzhongfill{
		color: #ffc90f;
	}
	.icon-yuanxingweixuanzhong{
		color: #e7e7e7;
	}
	.btnOp{
		position: fixed;
		width: 100%;
		height: 88upx;
		bottom: 45upx;
		left: 0;
		padding: 0 98upx;
		button{
			border: none;
			width: 100%;
			border-radius: 44upx;
			background-color: #ffb423;
			color: #FFFFFF;
			font-size: 32upx;
		}
		button:after{
			border: none;
			outline: none;
		}
	}
</style>
